<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>填写信息</title>
    <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/css/YD_calendar.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/LArea.css">
    <link rel="stylesheet" href="__PUBLIC__/css/bzjp_bmf_lq.css">
    <script type="text/javascript" src="__PUBLIC__/js/rem.js"></script>
    <script src="__PUBLIC__/js/YD_calendar.min.js"></script>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/js/layer/layer.js"></script>
    <script src="__PUBLIC__/js/LArea.js"></script>
    <script src="__PUBLIC__/js/LAreaData1.js"></script>
</head>
<body>
    <section class="m_container">
        <div class="m_item">
            <div class="m_wrap">
                <div class="m_title">您的八字适合哪种本命佛</div>
                <div class="m_p_wrap"><p class="m_p">本命佛有8种，每个八字只对应唯一的一种，只要戴对了本命佛才能得到真正的庇佑。</p></div>
                <div class="m_img_wrap"><img src="__PUBLIC__/images/bzjpbmf_img/image.png" alt=""></div>
                <p class="m_f_t"></p>
            </div>
        </div>
        <div class="m_item">
            <div class="m_wrap">
                <div class="m_title2">填写信息</div>
                <div class="m_form_container">
                    <form action="<!--{:U('Bzjpbmf/bzjp_bmf_zhifu','',false)}-->" method="POST" id="p_form">
                        <p class="m_form_p">请输入您的生辰八字：我们将根据您的八字为您自动推算。</p>
                        <ul class="m_form_ul">
                            <li>
                                <div class="f_left">性别</div>
                                <div class="f_auto">
                                    <label for="man">
                                        <input type="radio" name="gender" checked="checked" style="display: none" id="man" value="1">
                                        <span class="select"></span>男
                                    </label>
                                    <label for="woman">
                                        <input type="radio" name="gender" style="display: none" id="woman" value="0">
                                        <span class="select"></span>女
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="f_left">出生日期</div>
                                <div class="f_auto"><input type="text" data-date="1985-04-18-7" data-id="birthday" id="datetime" readonly="true" placeholder="请选择出生日期"></div>
                                <input type="hidden" id="birthday" name="birthday">
                            </li>
                            <li>
                                <div class="f_left">收件人姓名</div>
                                <div class="f_auto"><input type="text" id="username" name="username" placeholder="请输入姓名"></div>
                            </li>
                            <li>
                                <div class="f_left">收件人地址</div>
                                <div class="f_auto"><input id="area" type="text" readonly="" name="area" value="" placeholder="请选择收货地址"/></div>
                            </li>
                            <li>
                                <div class="f_left">详细街道</div>
                                <div class="f_auto"><input type="text" id="areaes" name="areaes" placeholder="请输入地址详细街道门牌号"></div>
                            </li>
                            <li>
                                <div class="f_left">手机号码</div>
                                <div class="f_auto"><input type="number" id="phone" name="phone"  placeholder="请输入手机号"></div>
                            </li>
                        </ul>
                        <p class="m_form_prompt">同时会为您八字详细分析，您将获得以下八字详批结果。</p>
                        <div class="m_form_btnwrap"><div class="m_form_submit"></div></div>
                    </form>
                </div>
            </div>
        </div>
        <div class="m_item">
            <div class="m_wrap">
                <div class="m_title2">商品介绍</div>
                <div class="m_img_wrap_d"><img src="__PUBLIC__/images/bzjpbmf_img/image_01.jpg" alt=""></div>
            </div>
        </div>
    </section>
    <script>
        var birthday = document.querySelector('#birthday');
        var username = document.querySelector('#username');
        var area = document.querySelector('#area');
        var areaes = document.querySelector('#areaes');
        var phone = document.querySelector('#phone');
        var m_form_submit = document.querySelector('.m_form_submit');
        
        m_form_submit.addEventListener('touchstart',function(){
            if(birthday.value == ""){
                layer.msg('请选择您的出生日期')
                return false;
            }
            if(username.value == ""){
                layer.msg('请输入您的姓名')
                return false;
            }else if(!/^[\u4e00-\u9fa5]{2,}$/.test(username.value)){
                layer.msg('请输入中文名字')
                return false;
            }
            if(area.value == ""){
                layer.msg('请选择收货地址')
                return false;
            }
            if(areaes.value == ""){
                layer.msg('请输入收货详细地址')
                return false;
            }else if(areaes.value.length < 6){
                layer.msg('详细地址不能低于6个字')
                return false;
            }
            if(phone.value == ""){
                layer.msg('请输入您的手机号码')
                return false;
            }else if(!/^[1][3,4,5,7,8][0-9]{9}/.test(phone.value)){
                layer.msg('手机号码输入有误')
                return false;
            }
            layer.load();
            setTimeout(function(){
                 layer.closeAll('loading');
                 layer.msg('订单提交成功', {icon: 1});
                 setTimeout(function(){
                     $('#p_form').submit();
                 },1500);
            },1000);
        })

        var calendar = new lCalendar().init('#datetime');

        var areaPlugin = new LArea();
        areaPlugin.init({
            'trigger': '#area',//触发选择控件的文本框，同时选择完毕后name属性输出到该位置
            'valueTo':'',//选择完毕后id属性输出到该位置
            'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
            'type':1,//数据源类型
            'data':LAreaData//数据源
        });
    </script>
</body>
</html>